<script lang="ts" setup>
import http from '@/http';
import { useUserStore } from '@/stores/user';
import { onMounted, ref } from 'vue';


    const handleOpen = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }
    const handleClose = (key: string, keyPath: string[]) => {
        console.log(key, keyPath)
    }

    //存储用户菜单的数据
    const menuData=ref([])
    //挂载完成，获取当前用户拥有的权限菜单
    onMounted(()=>{
        //从pinia获取用户对象
        const userStore=useUserStore()
        const user=userStore.getUser
        //1.获取登录的用户编号
        const uid=user.value.id
        //2.向后端发送根据用户编号获取拥有所有的菜单
        http.get('/menu/getUserMenus?uid='+uid)
        .then((res)=>{
           console.log(res)
           menuData.value=res;
        })
    })
</script>

<template>
    <el-row class="tac">
        <el-col :span="24">
            <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                <el-sub-menu  v-for="menu in menuData" :key="menu.id" :index="menu.menuId">
                    <template #title>
                        <el-icon>
                            <!-- 动态组件 -->
                            <component :is="menu.imageUrl"/>
                        </el-icon>
                        <span>{{menu.menuName}}</span>
                    </template>
                    <!-- 子菜单 -->
                    <el-menu-item v-for="childMenu in menu.childMenuList"
                           :key="childMenu.menuId" :index="menu.id+'-'+childMenu.menuId">
                       <!--路由链接  -->
                       <RouterLink :to="'/index'+childMenu.path">
                            <el-icon>
                                <component :is="childMenu.imageUrl"/>
                            </el-icon>
                            {{childMenu.menuName}}
                        </RouterLink>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-col>
    </el-row>
</template>

<style scoped>
   a{
     text-decoration: none;
     color: black;
   }
</style>
